<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('中药本草列表')" />

    <style>
        .text-overflow {
            overflow: hidden; /* 隐藏溢出的内容 */
            text-overflow: ellipsis; /* 使用省略号表示溢出的文本 */
        }
        .scrollable-body {
            max-height: 200px; /* 设置最大高度 */
            overflow-y: auto;  /* 当内容超出垂直方向时显示滚动条 */
        }
        .panel {
            margin-top: 5px;
            margin-left: 0px;
            margin-right: 0px;
            margin-bottom: 5px;
        }
    </style>

</head>
<body>

<div class="col-sm-12">
    <div class="panel panel-default">
        <div class="panel-body">
            <span th:each="config : ${listConfig}" style="margin: 5px">
                <button type="button" class="btn btn-default" th:text="${config.key}+' '+${config.value}" onclick="showBenCao(this)" style="margin-bottom: 5px"></button>
            </span>
        </div>
    </div>
</div>

<div class="col-sm-12">
    <div class="panel panel-default">
        <div class="panel-body" >
            <span th:utext="${vmeJingfang.content}" style="font-weight: bold"></span>
        </div>
    </div>
</div>

<div class="col-sm-12 panel">
    <table id="bootstrap-table" data-page-size="10"
           data-show-custom-view="true" data-custom-view="customViewFormatter"
           data-show-custom-view-button="false">
    </table>
</div>

<div class="container-div" style="margin: 10px">
    <template id="profileTemplate">
        <div class="col-sm-6">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <span class="panel-title form-inline">医案来源:%jingfangSrc%</span>
                    <button class="btn btn-default btn-xs" style="text-align: right" >详细</button>
                </div>
                <div class="panel-body scrollable-body" style="height: 200px">
                    %content%
                </div>
            </div>
        </div>
    </template>
</div>

<th:block th:include="include :: footer" />
<th:block th:include="include :: bootstrap-table-custom-view-js" />
    <script th:inline="javascript">
        var prefix = ctx;

        $(function() {
            var options = {
                url: "/customer/yian/list",
                showSearch:false,
                showToggle:false,
                showColumns:false,
                showRefresh:false,
                columns: [
                    {
                        field: 'jingfangId',
                        title: '经方编号',
                    },
                    {
                        field: 'jingfangName',
                        title: '经方名称'
                    },
                    {
                        field: 'patientName',
                        title: '患者名'
                    }]
            };
            $.table.init(options);
        });

        function customViewFormatter (data) {
            var template = $('#profileTemplate').html()
            var view = ''
            $.each(data, function (i, row) {
                view += template.replace('%jingfangSrc%', row.jingfangSrc)
                        .replace('%content%', row.content);
            })

            return `<div class="row mx-0">${view}</div>`
        }

        //显示本草
        function showBenCao(which){
            $.modal.open(which.innerText, "/customer/showBenCao/"+which.innerText);
            //alert(which);
        }

    </script>

<input name="jingfangId" th:text="${vmeJingfang.jingfangId}" type="hidden" />
</body>
</html>